<template>
  <div @click="getBody" class="runBody">
    <van-sticky :offset-top="0">
      <van-nav-bar v-if="balanceArr.length>0"
        :title="title +'('+ balanceArr[idIndex].UNIT + ')'"
      >
        <template #left>
          <div @click="onClickLeft" class="fanhui">
            <img src="../../assets/返回.png" alt="">
            <span class="sides">返回</span>
          </div>
        </template>
      </van-nav-bar>
    </van-sticky>
    <div ref="backTop" class="content" style="overflow: scroll">
      <div v-for="(item, index) in listArr" :key="index">
        <div class="month">{{index}}</div>
          <ul class="ulList" v-for="(ulItem, ulIndex) in item" :key="ulIndex">
            <li class="top" style="display: flex;justify-content: space-between">
              <div style="display: flex;justify-content: center;align-items: center">
                <img :src="imgArr[idIndex]" alt="">
                <a>{{title}}</a>
                <a>{{xtColumns[ulItem.chooseid]}}</a>
                <a v-if="balanceArr.length>0">{{ulItem.content}}{{balanceArr[idIndex].UNIT}}</a>
<!--                血压偏高--->
                <img src="../../assets/top.png" v-if="balanceArr[idIndex].HEALTHDATADYNAMIC_ID === 3
                 && parseInt(ulItem.content.split('/')[0]) > balanceArr[idIndex].LARGESTSTANDARDTWO"
                     class="img" alt="" />
                <!--              血压偏低 -->
                <img src="../../assets/bottom.png" v-else-if="balanceArr[idIndex].HEALTHDATADYNAMIC_ID === 3
                 && parseInt(ulItem.content.split('/')[1]) < balanceArr[idIndex].MINIMUMSTANDARDTWO"
                     class="img" alt="" />
<!--                其他值偏高-->
                <img src="../../assets/top.png" class="img" v-else-if="balanceArr[idIndex].HEALTHDATADYNAMIC_ID != 3
                 && parseInt(ulItem.content) > balanceArr[idIndex].LARGESTSTANDARD" alt="" />
<!--                其他值偏低-->
                <img src="../../assets/bottom.png" v-else-if="balanceArr[idIndex].HEALTHDATADYNAMIC_ID != 3 &&
                 parseInt(ulItem.content) < balanceArr[idIndex].MINIMUMSTANDARD" alt="" class="img"  />
              </div>
            </li>
            <li class="bottom">
              <a
                v-if="ulItem.storagetime != undefined &&
               formatDate(new Date(ulItem.storagetime)) != formatDate(new Date(ulItem.time))">
                补记&nbsp;&nbsp;{{xtColumns[ulItem.chooseid]}}</a>
              <a v-else>
                {{ulItem.zhanshiTime.split('年')[1]}}
                </a>
              <p class="" >
                <button v-show="isEdit !== 0"  @click="deleteThis(ulItem.id)" class="delBtn">删除</button>
              </p>
            </li>
          </ul>
      </div>
    </div>
    <div v-show="show"  @click="show=false" class="muBu"></div>
    <div v-show="show" class="tanChuang">
      <div class="msg">确定删除吗？</div>
      <button @click="quXiao">取消</button>
      <a></a>
      <button style="color: #1DA3F2" @click="queDing">确定</button>
    </div>
    <JianPan ref="JP" @run="run" :unitMsg="unitMsg" :thisTime="thisTime" :content="thisContent"></JianPan>
  </div>
</template>

<script>
// import axios from 'axios'
import $ from 'jquery'
import JianPan from '../../components/Vue/JianPan'
import { Toast } from 'vant'
export default {
  name: 'Run',
  data () {
    return {
      sanJiao: false,
      title: '',
      show: false,
      unitArr: ['千卡', '小时', '毫米汞柱', '毫摩尔/升', '次/分', '公斤'],
      xtColumns: ['餐前', '餐后一小时', '餐后两小时'],
      imgArr: [require('../../assets/运动2@2x.png'), require('../../assets/睡眠2@2x.png'), require('../../assets/血压2@2x.png'), require('../../assets/血糖2@2x.png'), require('../../assets/心率2@2x.png'), require('../../assets/体重2@2x.png')],
      listArr: [],
      idIndex: '',
      delID: '', // 当前选中列表的数据id
      unitMsg: '', // 当前选中列表的单位
      thisTime: '', // 当前选中列表的日期
      thisContent: '', // 当前选中列表的数据
      idType: '',
      top: 0,
      balanceArr: [], // 存储对比的值
      scrollTop: null, // 解决滚动事件
      isEdit: Number(this.$route.query.isEdit)
    }
  },
  components: {
    'JianPan': JianPan
    // [Dialog.Component.name]: Dialog.Component
  },
  mounted () {
    this.idIndex = this.$route.query.id - 1
    this.title = this.$route.query.titleMsg
    // 内容高度
    var contentHeight = $('.runBody').height() - $('.content').offset().top - 50 + 'px'
    $('.content').css({'height': contentHeight})
    // 获取对比值
    this.balanceGet()
    // 获取当前 类型的id 的所有历史记录
    this.getList(this.$route.query.id)
    // 滚动条的获取
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    // 获取比较值
    balanceGet () {
      // axios.get('http://jmx-kfdj.com/kfhl/healthdataDynamic/findHealthdataDynamic')
      this.$http.findHealthdataDynamic()
        .then(res => {
          console.log(res.data)
          this.balanceArr = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    getBody () {
      this.sanJiao = -1
    },
    // 删除弹窗 距离顶部的距离
    handleScroll () {
      this.top = Math.abs(this.$refs.backTop.getBoundingClientRect().top - 45) + 'px'
      // 弹窗固定在展示窗口中间
      $('.tanChuang').css('margin-top', this.top)
      $('.muBu').css('margin-top', this.top)
    },
    // 请求当前列表历史数据 http://jmx-kfdj.com/kfhl/healthdata/findHealthdata
    getList (id) {
      // axios.get('http://jmx-kfdj.com/kfhl/healthdata/findHealthdata', {params: {userid: this.$route.query.userid, typeid: id}})
      this.$http.findHealthdata({userid: this.$route.query.userid, typeid: id})
        .then(res => {
          // console.log(res)
          this.listArr = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 头部 返回上一页
    onClickLeft () {
      this.$router.go(-1)
    },
    // 触发删除弹窗 的 删除
    deleteThis (id) {
      this.delID = id
      this.show = true
    },
    // 删除当前选择的数据 确定按钮
    queDing () {
      this.getDelete(this.delID)
      this.show = false
      Toast('删除成功')
      // 移除滚动条的获取
      window.removeEventListener('scroll', this.handleScroll, true)
    },
    // 删除当前选择的数据 取消按钮
    quXiao () {
      this.show = false
      // 滚动条的获取
      window.addEventListener('scroll', this.handleScroll, true)
    },
    // 删除数据请求http://jmx-kfdj.com/kfhl/healthdata/deleteHealthdataById
    getDelete (id) {
      // axios.get('http://jmx-kfdj.com/kfhl/healthdata/deleteHealthdataById', {params: {id: id}})
      this.$http.deleteHealthdataById({id: id})
        .then(res => {
          this.getList(this.$route.query.id)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击哪列三个点图标显示 删除 框
    // sanJiaoBlock (index) {
    //   // 滚动条的移除
    //   this.sanJiao = index
    // },
    run (numText, time) {
      var tt = time.toString()
      var timer = tt.split('年')[0] + '-' + tt.split('年')[1].split('月')[0] + '-' + tt.split('年')[1].split('月')[1].split('日')[0]
      this.xiuGaiReturn(this.$route.query.id, this.$route.query.userid, numText, this.idType, timer)
      // 刷新
      Toast('修改成功')
    },
    formatDate (date, dayType) {
      var YY = date.getFullYear() + '年'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + '日'
      // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
      // var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      // if (new Date()) {
      //   return '今天' + ' ' + hh + mm
      // } else {
      return YY + MM + DD
      // }
    }
    // 点击修改
    // xiuGai (idType, time, content) {
    //   this.dialog = true
    //   setTimeout(() => {
    //     this.idType = idType
    //     this.$refs.JP.thisTime = time.split(' ')[0]
    //     this.unitMsg = this.unitArr[this.$route.query.id - 1]
    //     this.thisContent = content
    //     this.$refs.JP.oldContent = content
    //     if (this.$route.query.id === '1') {
    //       this.$refs.JP.kong()
    //       this.$refs.JP.typeID = 1
    //     } else if (this.$route.query.id === '2') {
    //       this.$refs.JP.block()
    //       this.$refs.JP.typeID = 2
    //     } else if (this.$route.query.id === '3') {
    //       this.$refs.JP.xie()
    //       this.$refs.JP.typeID = 3
    //     } else if (this.$route.query.id === '4') {
    //       this.$refs.JP.block()
    //       this.$refs.JP.typeID = 4
    //     } else if (this.$route.query.id === '5') {
    //       this.$refs.JP.kong()
    //       this.$refs.JP.typeID = 5
    //     } else if (this.$route.query.id === '6') {
    //       this.$refs.JP.block()
    //       this.$refs.JP.typeID = 6
    //     }
    //   }, 10)
    //   // console.log(this.idIndex + 1)
    // },
    // // 修改数据返回给后台
    // xiuGaiReturn (typeid, userid, content, idType, timea) {
    //   axios.get('http://jmx-kfdj.com/kfhl/healthdata/saveHealthdata',
    //     {params: {typeid: typeid, userid: userid, content: content, id: idType, timea: timea}})
    //     .then(res => {
    //       this.getList(this.$route.query.id)
    //       // console.log(res)
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },
    // // 得到修改后的数据
    // getXiuGai (id) {
    //   axios.get('http://jmx-kfdj.com/kfhl/healthdata/findHealthdataOne', {params: {id: id}})
    //     .then(res => {
    //       // console.log(res)
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // }
  },
  destroyed () {
    // 滚动条的移除
    window.removeEventListener('scroll', this.handleScroll, true)
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  html,body{
    width:100%;
    height:100%;
  }
  .runBody{
    height: 100%;
    overflow: scroll;
    background: #FAF9FE;
  }
  .fanhui{
    display: flex;
    align-items: center;
    color: #1da4f2;
  }
  .fanhui  img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
  }
  .sides{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  /deep/ .van-nav-bar__title{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  /deep/ .van-nav-bar{
    height: 12vw;
  }
  .month{
    width: 92vw;
    height: 11vw;
    line-height: 11vw;
    margin: 0 auto;
    font-size: 3.5vw;
    /*background-color: #1DA3F2;*/
  }
  .ulList{
    width: 92vw;
    height: 23vw;
    margin: 0 auto;
    border-radius: 10px;
    background-color: white;
    font-size: 3.5vw;
    margin-bottom: 3vw;
  }
  .ulList li{
    height: 11vw;
    display: flex;
    align-items: center;
  }
  .ulList .top img{
    width: 8vw;
    height: 8vw;
    padding-left: 4vw;
  }
  .ulList .top a{
    padding-left: 2vw;
  }
  .ulList .bottom{
    justify-content: space-between;
    color: #999999;
  }
  .ulList .bottom a{
    padding-left: 4vw;
  }
  .ulList .bottom img{
    width: 4vw;
    height: 1vw;
    padding-right: 4vw;
  }
  /*三角对话框*/
  .box{
    width: 10vw;
    height: 5.5vw;
    line-height: 5.5vw;
    position: absolute;
    right: 11vw;
    display: inline-block;
    padding: 1vw;
    border-radius: 2px;
    background: #333333;
    opacity: 0.8;
    font-size: 3.5vw;
    margin-right: 5vw;
    color: #fff;
    border-radius: 5px;
  }
  .box a{
    /*padding-right: 3vw;*/
    width: 100%;
    height: 100%;
    /*box-sizing: border-box;*/
    background: #07c160;
    letter-spacing: 1px;
  }
  .u-tri{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .u-tri:before{
    position: absolute;
    right: -4vw;
    top: 1.5vw;
    content: '';
    border-top: 2vw solid transparent;
    border-bottom: 2vw solid transparent;
    border-left: 2vw solid #333;
    border-right: 2vw solid transparent;
  }
  .delBtn{
    width: 60px;
    height: 28px;
    margin-right: 2vw;
    color: #1DA4F2;
    border-radius: 20px;
    background: rgba(29, 164, 242, 0.1);
    padding: 3px;
  }
  .btn{
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 3vw;
  }
  .btn:nth-child(1){
    border-right: 1px solid #fff;
  }
  .muBu{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    background-color: #333333;
    opacity: 0.5;
  }
  .tanChuang {
    width: 54vw;
    height: 34vw;
    margin: 0 auto;
    background-color: white;
    position: absolute;
    top: 40%;
    left: 25%;
    border-radius: 20px;
    overflow: hidden;
    font-size: 4vw;
  }
  .tanChuang a{
    /*color: #999;*/
    border-right: 1px solid #999;
  }
  .msg{
    width: 100%;
    height: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #999;
  }
  button{
    width: 45%;
    height: 50%;
    border: none;
    background-color: white;
  }
  .img{
    width: 4vw !important;
    height: 4vw !important;
    margin-right: 3vw !important;
  }
</style>
